<template>
  <div class="body_cookie_tips" style="background: rgb(32, 39, 55); height: 100%;overflow:auto;">

    <div class="include_common" id="pc_include_header" style="display: block;">
      <div>
        <div id="9f640708-9687-4c1a-a252-2a4be4b13ba7">
          <div class="cms_currency_layout cms_background_layout_9f640708-9687-4c1a-a252-2a4be4b13ba7">
            <div>
              <div class="header_2018 clear_rx">
                <div id="lenovo_logo">
                  <a @click="homePage">
                    <img src="../../../public/img/LOGO2x.png">
                  </a>
                </div>
                <div class="header_nav">
                  <div class="content">
                    <ul class="ul_nav" style="display:block;">
                      <li class="lis">
                        <a>联想首页</a>
                      </li>
                      <li class="lis">
                        <a>商城</a>
                      </li>
                      <li class="lis">
                        <a>消费产品</a>
                      </li>
                      <li class="lis">
                        <a>企业购</a>
                      </li>
                      <li class="lis">
                        <a>政教及大企业</a>
                      </li>
                      <li class="lis">
                        <a>服务</a>
                      </li>
                      <li class="lis">
                        <a>品牌</a>
                      </li>
                      <li class="lis">
                        <a>门店</a>
                      </li>
                      <li class="lis">
                        <a>会员</a>
                      </li>
                      <li class="lis">
                        <a>社区</a>
                      </li>
                      <li class="lis">
                        <span>下载APP</span>
                      </li>
                    </ul>
                    <div class="ur_r_html">
                      <div class="ul_r_2018">
                        <div class="phone">
                          <img src="../../../public/img/c8f87ce8-1e14-4bb3-854e-f86af0f07072.png" alt="">
                          <div class="phone_hov">
                            <ul>
                              <li style=" border-bottom: 1px solid #efefef">
                                <div>
                                  <img src="../../../public/img/cb6cb783-ef71-4248-9996-3602a7906600.jpg" alt="">
                                  <span class="title">联想APP <span class="name">新人专享0元购
																	<br>领685元大礼包</span>
															</span>
                                </div>
                              </li>
                            </ul>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="hold_header"></div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div id="authBox" class="authBox">
      <div class="pc2c_wrapper__Qv+76 pc2c_tocBg__YNq7X">
        <div class="pc2c_containerW__AP4eO">

          <div v-if="modalType === 'login'" class="pc2c_pcAuthForm__JFgI9">
            <div class="PcLogin_boxContainer__+XOfm">
              <div class="PcLogin_headRight_container__Ga7Nu" @click="modalType='qrCodeLogin'"></div>
              <div class="PcLogin_headLeft_container__vnV7U">
                <img class="PcLogin_headLeft_img__Idth7" src="../../../public/img/43dx.png" alt="">
                <span class="PcLogin_headLeft_title__aPWfe">扫码登录更安全</span>
              </div>
              <div class="PcLogin_titleStyle__Udheo">联想会员登录</div>
              <div class="PcLogin_middleContainer__O+Z3Q">
                <div class="tab-pane ">
                  <div @click="loginType='phone'" :class="'tab-pane-item '+(loginType==='phone'?'tab-pane-item-active':'')" style="margin-left: 0px;">
                    <div>
                      <div class="PcLogin_tabTitle__Yb0si">快捷登录</div>
                      <div :class="'bottomLine '+(loginType==='phone'?'lineAnimationRight':'')"></div>
                    </div>
                  </div>
                  <div @click="loginType='password'" :class="'tab-pane-item '+(loginType==='password'?'tab-pane-item-active':'')" style="margin-left: 39px;">
                    <div>
                      <div class="PcLogin_tabTitle__Yb0si">账号密码登录</div>
                      <div :class="'bottomLine '+(loginType==='password'?'lineAnimationLeft':'')"></div>
                    </div>
                  </div>
                </div>
                <div>
                  <div v-if="loginType === 'phone'">
                    <div class="commonInput_container ">
                      <div class="le-input">
                        <input autocomplete="off" placeholder="请输入手机号" v-model="form1.phone">
                      </div>
                      <div class="errorMsg accountMsg">
                        <img v-if="msg1" src="../../../public/img/gfgfgf.png" alt="">{{msg1}}
                      </div>
                    </div>
                    <div class="commonInput_container flexStyle ">
                      <div class="captchaBox_box__zURFJ">
                        <div class="le-input">
                          <input autocomplete="off" class="captchaBox_inputContainer__V5STV" placeholder="请输入短信验证码" v-model="form1.smsCode" style="height: 56px;">
                        </div>
                        <div @click="sendSmsCode" :class="'le-button le-button-undefined le-button-undefined captchaBox_verifyCodeBtn__+14oD '+(smsCodeCount1>0?'sms-code-disabled':'')">
                          {{smsCodeCount1 >0?('重新发送'+smsCodeCount1+'s'):'获取验证码'}}
                        </div>
                      </div>
                      <div class="errorMsg captchaMsg">
                        <img v-if="msg2" src="../../../public/img/gfgfgf.png" alt="">{{msg2}}
                      </div>
                    </div>
                    <div class="PcLogin_interface_errorMsg__pkEYf"></div>
                    <div class="checkBoxContainer loginCheck flexStyle">
                      <div class="le-checkbox-container">
                        <div class="le-checkbox-content">
                          <img v-if="!agree1" @click="agree1=!agree1" class="le-checkbox-icon" src="../../../public/img/uncheck.png">
                          <img v-if="agree1" @click="agree1=!agree1" class="le-checkbox-icon" src="../../../public/img/check.png">
                          <p class="PrivacyInfo_infoStyle__YpTrQ">如果您输入的手机号未注册，将为您进行注册，注册即表示您同意<span class="PrivacyInfo_infoFontStyle__7a34d">
													<span class="PrivacyInfo_inlineBlock__YbZsr">注册协议、</span>
													<span class="PrivacyInfo_inlineBlock__YbZsr">隐私政策、</span>
													<span class="PrivacyInfo_inlineBlock__YbZsr">销售条款</span>
												</span>
                          </p>
                        </div>
                      </div>
                    </div>
                    <button @click="loginFun" type="button" class="commonBtn loginBtn_quick" style="letter-spacing: 10px; pointer-events: unset;">登录</button>
                    <div class="commonRegist flexStyle">
                      <span @click="modalType='register'">注册账号</span>
                      <p class="arrowRight"></p>
                    </div>
                  </div>

                  <div v-if="loginType === 'password'">
                    <div>
                      <div class="commonInput_container ">
                        <div class="le-input">
                          <input autocomplete="off" placeholder="请输入手机号/邮箱" v-model="form2.phone">
                        </div>
                        <div class="errorMsg accountMsg">
                          <img v-if="msg3" src="../../../public/img/gfgfgf.png" alt="">{{msg3}}
                        </div>
                      </div>
                      <div class="commonInput_container ">
                        <div class="le-input">
                          <input autocomplete="off" type="password" placeholder="请输入密码" v-model="form2.password">
                        </div>
                        <div class="errorMsg passwordMsg">
                          <img v-if="msg4" src="../../../public/img/gfgfgf.png" alt="">{{msg4}}
                        </div>
                      </div>
                      <div class="checkBoxContainer loginCheck flexStyle">
                        <div class="le-checkbox-container">
                          <div class="le-checkbox-content">
                            <img v-if="!agree2" @click="agree2=!agree2" class="le-checkbox-icon" src="../../../public/img/uncheck.png">
                            <img v-if="agree2" @click="agree2=!agree2" class="le-checkbox-icon" src="../../../public/img/check.png">
                            <p class="PrivacyInfo_infoStyle__YpTrQ">
                              已阅读并同意
                              <span class="PrivacyInfo_infoFontStyle__7a34d">
                              <span class="PrivacyInfo_inlineBlock__YbZsr">注册协议、</span>
                              <span class="PrivacyInfo_inlineBlock__YbZsr">隐私政策、</span>
                              <span class="PrivacyInfo_inlineBlock__YbZsr">销售条款</span>
                            </span>
                            </p>
                          </div>
                        </div>
                      </div>
                      <button @click="loginFun" type="button" class="commonBtn loginBtn_number" style="letter-spacing: 10px; pointer-events: unset;">登录</button>
                      <div class="commonRegist flexStyle">
                        <p>忘记密码</p>
                        <p class="verticalSplitLine">|</p>
                        <p @click="modalType='register'">注册账号</p>
                        <p @click="modalType='register'" class="arrowRight"></p>
                      </div>
                    </div>
                  </div>

                </div>
                <div class="PcOtherLoginContainer_bottomContainer__r028P">
                  <div class="PcOtherLoginContainer_flexStyle__Vhh+5 PcOtherLoginContainer_otherLogin_style__-UB+W">
                    <div class="PcOtherLoginContainer_bottomLine__wg4gX"></div>其他登录方式<div class="PcOtherLoginContainer_bottomLine__wg4gX"></div>
                  </div>
                  <div class="PcOtherLoginContainer_flexStyle__Vhh+5 PcOtherLoginContainer_otherLogin_imgs__a5TED">
                    <img class="PcOtherLoginContainer_otherLogin_img__cKwXg" src="../../../public/img/wechat.png" alt="">
                    <img class="PcOtherLoginContainer_otherLogin_img__cKwXg" src="../../../public/img/qq.png" alt="">
                    <img class="PcOtherLoginContainer_otherLogin_img__cKwXg" src="../../../public/img/weibo.png" alt="">
                    <img class="PcOtherLoginContainer_otherLogin_img__cKwXg" src="../../../public/img/alipay.png" alt="">
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div v-if="modalType === 'qrCodeLogin'" class="pc2c_pcAuthForm__JFgI9">
            <div class="ScanCodeLogin_scanCode_container__6-Jdu">
              <div class="ScanCodeLogin_headRight_container__ACX1z" @click="modalType='login'"></div>
              <div class="ScanCodeLogin_title__HGvV7">联想会员扫码登录</div>
              <div class="">
                <div class="ScanCodeLogin_codeImg__thGiD">
                  <img src="../../../public/img/show.png" alt="">
                  <div class="ScanCodeLogin_qrcodeError__-hA-L PcLogin_displayNone__IiXzW">
                    <div>二维码过期</div>
                    <div class="le-button le-button-primary le-button-undefined undefined">刷新</div>
                  </div>
                </div>
                <div class="ScanCodeLogin_codeInfo__Zrvcr">
                  <img src="../../../public/img/scanner.png" alt="">打开 <span>联想APP</span>扫码进行登录</div>
                <div class="ScanCodeLogin_scanCode_load__p1XHW ScanCodeLogin_flexStyle__3eA2q">扫码下载联想APP
                  <img @mouseover="showDownImg=true" @mouseleave="showDownImg=false" src="../../../public/img/download.png" alt="">
                </div>
              </div>
              <div class="ScanCodeLogin_scanSuccess__1i7bJ PcLogin_displayNone__IiXzW">
                <img src="../../../public/img/a5411616b42831b7aeae.png" alt="">
                <div class="scanSuccess_icon">扫码成功</div>
                <div>请勿刷新本页面，按手机提示操作</div>
              </div>
              <div v-if="showDownImg" @mouseover="showDownImg=true" @mouseleave="showDownImg=false" class="ScanCodeLogin_smallCode_container__8MTIs">
                <div class="ScanCodeLogin_triangle1__MZ-4m"></div>
                <div class="ScanCodeLogin_triangle2__VWmPu"></div>
                <img src="../../../public/img/5915a8e9bafd57bd24d9.png" alt="">
              </div>
            </div>
          </div>

          <div v-if="modalType === 'register'" class="pc2c_pcAuthForm__JFgI9 pcRegister_wrapper__YhCGZ">
            <div class="pcRegister_registerContainer__oIcJl">
              <h1 class="pcRegister_title__YmFnw">注册联想账号</h1>
              <form style="width: 370px;">
                <div class="form-item-container" style="margin-top: 28px;">
                  <div class="le-input">
                    <input autocomplete="off" class="pcRegister_inputContainer__OHd0W" placeholder="请输入手机号" v-model="form3.phone" style="height: 56px;">
                  </div>
                  <p class="form-item-error">
                    <img v-if="msg5" src="../../../public/img/gfgfgf.png" class="form-item-error-icon">
                    {{msg5}}
                  </p>
                </div>
                <div class="form-item-container" style="margin-top: 28px;">
                  <div class="captchaBox_box__zURFJ">
                    <div class="le-input">
                      <input autocomplete="off" class="captchaBox_inputContainer__V5STV" placeholder="请输入短信验证码" v-model="form3.smsCode" style="height: 56px;">
                    </div>
                    <div @click="sendSmsCode" :class="'le-button le-button-undefined le-button-undefined captchaBox_verifyCodeBtn__+14oD '+(smsCodeCount3>0?'sms-code-disabled':'')">
                      {{smsCodeCount3 >0?('重新发送（'+smsCodeCount3+'s'):'获取验证码'}}
                    </div>
                  </div>
                  <p class="form-item-error">
                    <img v-if="msg6" src="../../../public/img/gfgfgf.png" class="form-item-error-icon">
                    {{msg6}}
                  </p>
                </div>
                <div class="form-item-container" style="margin-top: 14px; height: auto;" value="true">
                  <div class="pcRegister_checkBoxContainer__iqiNc">
                    <div class="le-checkbox-container">
                      <div class="le-checkbox-content">
                        <img v-if="!agree3" @click="agree3=!agree3" class="le-checkbox-icon" src="../../../public/img/uncheck.png">
                        <img v-if="agree3" @click="agree3=!agree3" class="le-checkbox-icon" src="../../../public/img/check.png">
                        <p class="PrivacyInfo_infoStyle__YpTrQ">已阅读并同意
                          <span class="PrivacyInfo_infoFontStyle__7a34d">
                          <span class="PrivacyInfo_inlineBlock__YbZsr">注册协议、</span>
                          <span class="PrivacyInfo_inlineBlock__YbZsr">隐私政策、</span>
                          <span class="PrivacyInfo_inlineBlock__YbZsr">销售条款</span>
                        </span>
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="form-item-container" style="margin-top: 14px;">
                  <div @click="registerFun" class="le-button le-button-primary le-button-undefined pcRegister_registerBtn__2PVC+">注册</div>
                </div>
              </form>
              <div class="pcRegister_commonRegister__QWDLd pcRegister_flexStyle__IKXy+">
                <p>企业会员注册</p>
                <p class="pcRegister_line__hz5JJ">|</p>
                <p @click="modalType='login'">立即登录</p>
                <p class="pcRegister_arrowRight__QX-97"></p>
              </div>
            </div>
            <div></div>
            <div></div>
          </div>

          <div class="pc2c_include_common__vQzjW" id="pc_include_footer" style="display: block;">
            <div class="pc2c_company_news__eoSqy">
              <p>版权所有：1998-2023 联想集团 | <a>法律公告</a> | <a>隐私权政策</a> | <a>京ICP备11035381-2</a> | 京公网安备110108007970号 | <a>营业执照：91110108700000458B</a>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import {getStore,setStore} from "@/utils/store.js";
  import { setToken } from '@/utils/auth';
  export default {
    data() {
      return {
        modalType:'login',
        showDownImg: false,
        loginType: 'phone',
        defaultValidCode: '1234',//默认验证码
        defaultPassword: '1234',//默认注册密码
        defaultAvatar: require('../../../public/img/avatar.jpg'),//注册默认头像
        userInfo:{},
        userList:[],//全部用户列表
        agree1: false,
        agree2: false,
        agree3: false,
        msg1:'',
        msg2:'',
        msg3:'',
        msg4:'',
        msg5:'',
        msg6:'',
        //手机号登录
        form1:{
          phone:'',
          smsCode:''
        },
        //密码登录
        form2:{
          phone:'',
          password:''
        },
        //注册
        form3:{
          phone:'',
          smsCode:''
        },
        smsCodeCount1: 0,
        smsCodeCount3: 0,
        interval1: null,
        interval2: null,
      };
    },
    mounted() {
    },
    methods: {
      homePage(){//首页
        this.$router.push({path:'/'});
      },
      //发送验证码
      sendSmsCode(){
        if(this.modalType === 'login'){
          if(this.form1.phone.trim() === ''){
            this.msg1 = '请输入手机号';
            return;
          }else{
            this.msg1 = '';
          }
          if(this.smsCodeCount1 === 0){
            this.smsCodeCount1 = 60;
            this.form1.smsCode = this.defaultValidCode;
            this.$message.success('验证码已发送，验证码为：1234');
            let that = this;
            that.interval1 = setInterval(function(){
              that.smsCodeCount1--;
              if(that.smsCodeCount1 <= 0){
                that.smsCodeCount1 = 0;
                clearInterval(that.interval1)
              }
            },1000)
          }
        }else{
          if(this.form3.phone.trim() === ''){
            this.msg5 = '请输入手机号';
            return;
          }else{
            this.msg5 = '';
          }
          if(this.smsCodeCount3 === 0){
            this.smsCodeCount3 = 60;
            this.form3.smsCode = this.defaultValidCode;
            this.$message.success('验证码已发送，验证码为：1234');
            let that = this;
            that.interval3 = setInterval(function(){
              that.smsCodeCount3--;
              if(that.smsCodeCount3 <= 0){
                that.smsCodeCount3 = 0;
                clearInterval(that.interval3)
              }
            },1000)
          }
        }

      },
      //登录
      loginFun(){
        //手机号登录
        if(this.loginType === 'phone'){
          if(this.form1.phone.trim() === ''){
            this.msg1 = '请输入手机号';
            return;
          }else{
            this.msg1 = '';
          }
          if(this.form1.smsCode.trim() === ''){
            this.msg2 = '请输入短信验证码';
            return;
          }else{
            this.msg2 = '';
          }
          if(this.form1.smsCode !== this.defaultValidCode){
            this.$message.warning('验证码错误，请重新输入');
            return;
          }
        }else if(this.loginType === 'password'){
          if(this.form2.phone.trim() === ''){
            this.msg3 = '请输入手机号/邮箱';
            return;
          }else{
            this.msg3 = '';
          }
          if(this.form2.password.trim() === ''){
            this.msg4 = '请输入密码';
            return;
          }else{
            this.msg4 = '';
          }
        }
        const loading = this.$loading({
          lock: true,
          text: '登录中,请稍后。。。',
          spinner: "el-icon-loading"
        });
        //获取所有用户
        let userList = getStore({name:'userList'});
        if(userList){
          this.userList = userList;
          let hadUser = false;//循环拼单是否存在用户
          this.userList.forEach((item,index)=>{
            if((this.loginType === 'phone' && item.phone === this.form1.phone) || (this.loginType === 'password' && item.phone === this.form2.phone && item.password === this.form2.password)){
              hadUser = true;
              this.userInfo = item;
              //模拟登录用户 存到缓存
              this.$store.commit('SET_USER_INFO', this.userInfo);
              //设置登录token
              setToken(this.userInfo.id);
              this.$notify({
                title: '提示',
                message: '登录成功',
                type: 'success'
                //duration: 0//为0则不会自动关闭
              });
              loading.close();
              this.$router.push({'path':'/index'});
            }else if(index === (this.userList.length - 1) && !hadUser){
              this.$message.warning('账号或密码错误');
              loading.close();
            }
          });
        }else{
          this.$message.warning('账号或密码错误');
          loading.close();
        }
      },
      //注册
      registerFun(){
        if(this.form3.phone.trim() === ''){
          this.msg5 = '请输入手机号';
          return;
        }else{
          this.msg5 = '';
        }
        if(this.form3.smsCode.trim() === ''){
          this.msg6 = '请输入短信验证码';
          return;
        }else{
          this.msg6 = '';
        }
        if(this.form3.smsCode !== this.defaultValidCode){
          this.$message.warning('验证码错误，请重新输入');
          return;
        }
        const loading = this.$loading({
          lock: true,
          text: '注册中,请稍后。。。',
          spinner: "el-icon-loading"
        });
        //获取所有用户
        this.userList = getStore({name:'userList'});
        if(!this.userList){
          this.userList = [];
        }
        let pass = true;
        if(this.userList.length === 0){
          this.checkUseRegister();
          loading.close();
        }else{
          this.userList.forEach((item,index)=>{
            if(pass){
              if(item.phone === this.form3.phone){
                this.$message.warning('手机号已被注册，请修改');
                loading.close();
                pass = false;
              }
            }
            if(pass && index === (this.userList.length-1)){
              this.checkUseRegister();
              loading.close();
            }
          });
        }
      },
      checkUseRegister(){//注册
        //模拟注册用户 存到缓存
        let id = this.userList?(this.userList.length + 1):1;//递增id
        let userInfo = {
          id: id,
          phone: this.form3.phone,
          password: this.defaultPassword,
          avatar: this.defaultAvatar
        };
        this.userList.push(userInfo);
        //用户列表 - 存储到缓存
        setStore({name:'userList',content: this.userList});
        this.$notify({
          title: '提示',
          message: '注册成功，请登录',
          type: 'success',
          duration: 2000//为0则不会自动关闭
        });
        this.modalType = 'login';
        this.loginType = 'phone';
      }
    }
  };
</script>

<style scoped>
  .body_cookie_tips {
    font-size: 12px;
    font-family: '微软雅黑';
  }
  .cms_currency_layout {
    width: 100%;
    margin: 0 auto;
    position: relative;
  }
  .header_2018 {
    width: 100%;
    background: #e0e0e0;
    position: static;
    top: 0;
    left: 0;
    z-index: 999999999;
    min-width: 1310px;
  }

  .clear_rx {
    zoom: 1;
  }
  #lenovo_logo {
    float: left;
    transition: all .2s;
    position: absolute;
    margin-top: 7px;
    margin-left: 20px;
  }
  .header_2018 a {
    text-decoration: none;
    color: #000;
  }
  #lenovo_logo img {
    width: 178px;
  }
  .header_2018 img {
    border: 0;
    vertical-align: top;
  }
  .header_2018 .header_nav {
    width: 100%;
    height: 50px;
    background: #fff;
  }
  .clear_rx:after {
    content: '';
    display: block;
    clear: both;
  }
  .header_2018 .header_nav .content {
    width: 1200px;
    height: 50px;
    margin: 0 auto;
  }
  .header_2018 ul {
    margin: 0;
  }
  ul {
    padding: 0;
  }
  .header_2018 .header_nav .content .lis {
    float: left;
    line-height: 49px;
    font-size: 15px;
    color: #8d8d8d;
    margin-right: 22px;
  }
  li {
    list-style: none;
  }
  .header_2018 .header_nav .content .lis a {
    color: #8d8d8d;
    font-size: 15px;
  }
  .header_2018 a {
    text-decoration: none;
  }
  a {
    outline: 0;
    cursor: pointer;
  }
  .ul_r_2018 {
    float: right;
    height: 49px;
  }
  .ul_r_2018 .phone {
    float: right;
    width: 30px;
    height: 50px;
    padding: 13.5px 0 13.5px 0px;
    position: relative;
    box-sizing: border-box;
    margin-left: 20px;
  }
  .ul_r_2018 .phone img {
    width: 23px;
    height: 23px;
  }
  .ul_r_2018 .phone:hover .phone_hov{
    display: block;
  }
  .header_2018 img {
    border: 0;
    vertical-align: top;
  }
  .ul_r_2018 .phone .phone_hov {
    display: none;
    position: absolute;
    left: -100px;
    top: 50px;
    float: left;
    width: 198px;
    z-index: 100;
    background: #fff;
  }
  .ul_r_2018 .phone .phone_hov ul {
    border-radius: 5px;
    overflow: hidden;
  }
  .header_2018 ul {
    margin: 0;
  }
  .ul_r_2018 .phone .phone_hov ul li {
    height: 105px;
    padding: 12px 0 0 12px;
    box-sizing: border-box;
  }
  li {
    list-style: none;
  }
  .ul_r_2018 .phone .phone_hov img {
    width: 80px;
    height: 80px;
    display: inline-block;
  }
  .header_2018 img {
    border: 0;
    vertical-align: top;
  }
  .ul_r_2018 .phone .phone_hov ul li div .title {
    font-size: 13px;
    width: 90px;
    display: inline-block;
    margin-top: 5px;
    margin-left: 10px;
  }
  .ul_r_2018 .phone .phone_hov ul li div .name {
    color: #f10315;
    font-size: 12px;
    width: 90px;
    display: inline-block;
    margin-top: 10px;
  }

  .authBox {
    height: 100%;
    width: 100%;
  }
  .pc2c_tocBg__YNq7X {
    background: url(../../../public/img/469d49e8faf83466a25a.jpg) no-repeat 50%;
    background-size: 1920px 800px;
  }
  .pc2c_wrapper__Qv\+76 {
    height: 800px;
    position: relative;
    width: 100%;
  }
  .pc2c_containerW__AP4eO {
    box-sizing: border-box;
    height: 100%;
    margin: 0 auto;
    padding-top: 65px;
    width: 1200px;
  }
  .pc2c_pcAuthForm__JFgI9 {
    background: hsla(0,0%,100%,.95);
    border-radius: 4px;
    float: right;
    height: auto;
    margin-bottom: 80px;
    min-height: 586px;
    position: relative;
    right: 30px;
    width: 460px;
  }
  .PcLogin_boxContainer__\+XOfm {
    overflow: hidden;
  }
  .PcLogin_boxContainer__\+XOfm .PcLogin_headRight_container__Ga7Nu {
    background-image: url(../../../public/img/qrcode_login.png);
    background-size: 100%;
    cursor: pointer;
    float: right;
    height: 67px;
    margin-right: 2px;
    margin-top: 2px;
    opacity: .7;
    width: 71px;
  }
  .PcLogin_boxContainer__\+XOfm .PcLogin_headLeft_container__vnV7U {
    background-image: linear-gradient(237deg,hsla(0,100%,74%,.18) 46%,rgba(255,201,151,.6));
    border-radius: 3px;
    display: flex;
    float: right;
    height: 21px;
    margin-top: 10px;
    padding-left: 7px;
    padding-top: 4px;
    width: 107px;
  }
  .PcLogin_boxContainer__\+XOfm .PcLogin_headLeft_container__vnV7U .PcLogin_headLeft_img__Idth7 {
    height: 14px;
    margin-right: 4px;
    width: 11px;
  }
  .PcLogin_boxContainer__\+XOfm .PcLogin_headLeft_container__vnV7U .PcLogin_headLeft_title__aPWfe {
    color: #ee4e4e;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
  }
  .PcLogin_boxContainer__\+XOfm .PcLogin_titleStyle__Udheo {
    color: #252525;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 0;
    margin: 58px 54px 35px 50px;
  }
  .PcLogin_boxContainer__\+XOfm .PcLogin_middleContainer__O\+Z3Q {
    box-sizing: border-box;
    padding: 0 45px;
    width: 100%;
  }
  .tab-pane {
    display: flex;
  }
  .tab-pane .tab-pane-item {
    cursor: pointer;
    position: relative;
  }
  .PcLogin_boxContainer__\+XOfm .PcLogin_middleContainer__O\+Z3Q .tab-pane-item-active .PcLogin_tabTitle__Yb0si {
    color: #252525;
    font-weight: 500;
  }
  .PcLogin_boxContainer__\+XOfm .PcLogin_middleContainer__O\+Z3Q .PcLogin_tabTitle__Yb0si {
    color: #787878;
    font-size: 16px;
    letter-spacing: 0;
    margin-left: 5px;
    position: relative;
    text-align: center;
  }
  .tab-pane .tab-pane-item-active .lineAnimationRight {
    animation: moveRight .2s linear;
    visibility: visible;
  }
  .tab-pane .bottomLine {
    background-color: #e1140a;
    height: 3px;
    left: 50%;
    margin-left: -20px;
    position: absolute;
    top: 25px;
    width: 40px;
  }
  .tab-pane .tab-pane-item {
    cursor: pointer;
    position: relative;
  }
  .PcLogin_boxContainer__\+XOfm .PcLogin_middleContainer__O\+Z3Q .PcLogin_tabTitle__Yb0si {
    color: #787878;
    font-size: 16px;
    letter-spacing: 0;
    margin-left: 5px;
    position: relative;
    text-align: center;
  }
  .tab-pane .bottomLine {
    background-color: #e1140a;
    height: 3px;
    left: 50%;
    margin-left: -20px;
    position: absolute;
    top: 25px;
    visibility: hidden;
    width: 40px;
  }
  .commonInput_container {
    height: 56px;
    margin-top: 28px;
    position: relative;
    width: 100%;
  }
  .le-input {
    display: inline-block;
    font-size: 14px;
    height: 100%;
    position: relative;
    width: 100%;
  }
  .le-input input {
    border-radius: 4px;
  }
  .le-input input {
    background-color: #f6f6f6;
    border: 1px solid #eee;
    height: 100%;
    text-indent: 18px;
    transition: all .3s cubic-bezier(.645,.045,.355,1);
    width: 100%;
  }
  input, textarea {
    outline: 0;
  }
  input{
    margin: 0;
    padding: 0;
  }
  .errorMsg, .interface_errorMsg {
    align-items: center;
    color: #e1140a;
    display: flex;
    font-size: 12px;
    font-weight: 400;
    margin-top: 4px;
    position: absolute;
  }
  .errorMsg img, .interface_errorMsg img {
    /*display: none;*/
    height: 11px;
    margin-left: 4px;
    margin-right: 3px;
    width: 11px;
  }
  .commonInput_container {
    height: 56px;
    margin-top: 28px;
    position: relative;
    width: 100%;
  }
  .flexStyle {
    display: flex;
  }
  .captchaBox_box__zURFJ {
    align-items: center;
    display: flex;
    width: 100%;
  }
  .le-input {
    display: inline-block;
    font-size: 14px;
    height: 100%;
    position: relative;
    width: 100%;
  }
  .captchaBox_box__zURFJ .captchaBox_inputContainer__V5STV {
    background-color: #f6f6f6;
    border-radius: 4px;
  }

  .le-input input {
    border: 1px solid #eee;
    text-indent: 18px;
    transition: all .3s cubic-bezier(.645,.045,.355,1);
    width: 100%;
  }
  input, textarea {
    outline: 0;
  }
  .le-button {
    align-items: center;
    background-color: #eee;
    color: #454545;
    cursor: pointer;
    display: inline-flex;
    font-size: 12px;
    height: 30px;
    justify-content: center;
    padding: 0 22px;
  }
  .captchaBox_box__zURFJ .captchaBox_verifyCodeBtn__\+14oD {
    background: #fff1f1;
    border: 1px solid #fadfdf;
    border-radius: 4px;
    color: #e1140a;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    height: 56px;
    letter-spacing: 0;
    margin-left: 5px;
    opacity: .7;
    text-align: center;
    white-space: nowrap;
    width: 122px;
  }
  .commonInput_container .captchaMsg {
    bottom: -20px;
    position: absolute;
  }
  .errorMsg, .interface_errorMsg {
    align-items: center;
    color: #e1140a;
    display: flex;
    font-size: 12px;
    font-weight: 400;
    margin-top: 4px;
  }
  .errorMsg img, .interface_errorMsg img {
    /*display: none;*/
    height: 11px;
    margin-left: 4px;
    margin-right: 3px;
    width: 11px;
  }
  .PcLogin_interface_errorMsg__pkEYf {
    align-items: center;
    color: #e1140a;
    display: flex;
    font-size: 12px;
    font-weight: 400;
    padding: 4px;
    position: absolute;
  }
  .loginCheck {
    margin-top: 30px;
  }
  .checkBoxContainer {
    width: 100%;
  }
  .flexStyle {
    display: flex;
  }
  .checkBoxContainer .le-checkbox-container {
    align-items: normal;
  }
  .le-checkbox-container .le-checkbox-content {
    display: flex;
  }
  .le-checkbox-container .le-checkbox-content .le-checkbox-icon {
    cursor: pointer;
    height: 16px;
    margin-right: 4px;
    width: 16px;
  }
  .checkBoxContainer p {
    line-height: 16px;
  }
  .PrivacyInfo_infoStyle__YpTrQ {
    color: #252525;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 14px;
    opacity: .9;
  }
  p{
    margin: 0;
    padding: 0;
  }
  .PrivacyInfo_infoFontStyle__7a34d {
    color: #252525;
    cursor: pointer;
    font-weight: 700;
    padding: 0 5px;
  }
  .PrivacyInfo_inlineBlock__YbZsr {
    display: inline-block;
  }
  .loginBtn_quick {
    margin: 8px auto 10px;
  }
  .commonBtn {
    background-image: linear-gradient(90deg,#f22d18,#e53939);
    border: 0;
    border-radius: 4px;
    box-shadow: 0 4px 10px 0 hsla(3,45%,67%,.49);
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    font-weight: 400;
    height: 56px;
    text-align: center;
    width: 370px;
  }
  .commonRegist {
    align-items: center;
    color: #252525;
    font-size: 13px;
    font-weight: 400;
    justify-content: flex-end;
    letter-spacing: 0;
  }
  .flexStyle {
    display: flex;
  }
  .commonRegist p, .commonRegist span {
    cursor: pointer;
  }
  .commonRegist .arrowRight {
    background-color: initial;
    border-color: #979797;
    border-style: solid;
    border-width: 1px 1px 0 0;
    height: 5px;
    margin-left: 3px;
    transform: rotate(45deg);
    width: 5px;
  }
  .commonRegist p, .commonRegist span {
    cursor: pointer;
  }
  .PcOtherLoginContainer_bottomContainer__r028P {
    margin: 41px 0 50px;
    padding-top: 5px;
  }
  .PcOtherLoginContainer_otherLogin_style__-UB\+W {
    align-items: center;
    color: #606060;
    font-size: 12px;
    font-weight: 400;
    justify-content: space-around;
    letter-spacing: 2px;
  }
  .PcOtherLoginContainer_flexStyle__Vhh\+5 {
    display: flex;
  }
  .PcOtherLoginContainer_bottomLine__wg4gX {
    background: #e4e4e4;
    height: 1px;
    width: 100px;
  }
  .PcOtherLoginContainer_otherLogin_imgs__a5TED {
    justify-content: space-between;
    margin: 20px auto;
    width: 300px;
  }
  .PcOtherLoginContainer_flexStyle__Vhh\+5 {
    display: flex;
  }
  .PcOtherLoginContainer_otherLogin_img__cKwXg {
    cursor: pointer;
    height: 40px;
    opacity: .8;
    width: 40px;
  }
  .pc2c_include_common__vQzjW {
    clear: both;
    display: none;
    padding-bottom: 10px;
  }
  .pc2c_company_news__eoSqy p, .pc2c_company_news__eoSqy p a {
    color: #454545;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
  }
  .pc2c_company_news__eoSqy p a {
    outline: 0;
    text-decoration: none;
  }
  .pc2c_company_news__eoSqy p, .pc2c_company_news__eoSqy p a {
    color: #454545;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
  }

  .pcRegister_wrapper__YhCGZ {
    min-height: auto;
  }
  .pc2c_pcAuthForm__JFgI9 {
    background: hsla(0,0%,100%,.95);
    border-radius: 4px;
    float: right;
    height: auto;
    margin-bottom: 80px;
    position: relative;
    right: 30px;
    width: 460px;
  }
  .pcRegister_registerContainer__oIcJl {
    box-shadow: 0 0 16px 0 hsla(0,0%,80%,.33);
    padding: 60px 45px 71px;
  }

  .pcRegister_registerContainer__oIcJl .pcRegister_title__YmFnw {
    color: #252525;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 0;
    margin: 0 0 30px 7px;
  }
  .header_2018 h2, h3, h1 {
    padding: 0;
  }
  form {
    margin: 0;
    padding: 0;
  }
  .form-item-container {
    height: 56px;
    width: 100%;
  }
  .le-input {
    display: inline-block;
    font-size: 14px;
    height: 100%;
    position: relative;
    width: 100%;
  }
  .pcRegister_registerContainer__oIcJl .pcRegister_inputContainer__OHd0W {
    background-color: #f6f6f6;
    border-radius: 4px;
  }
  .le-input input {
    border: 1px solid #eee;
    text-indent: 18px;
    transition: all .3s cubic-bezier(.645,.045,.355,1);
    width: 100%;
  }
  input, textarea {
    outline: 0;
  }
  .captchaBox_box__zURFJ {
    align-items: center;
    display: flex;
    width: 100%;
  }
  .le-input {
    display: inline-block;
    font-size: 14px;
    height: 100%;
    position: relative;
    width: 100%;
  }
  .le-button {
    align-items: center;
    background-color: #eee;
    color: #454545;
    cursor: pointer;
    display: inline-flex;
    font-size: 12px;
    height: 30px;
    justify-content: center;
    padding: 0 22px;
  }
  .captchaBox_box__zURFJ .captchaBox_verifyCodeBtn__\+14oD {
    background: #fff1f1;
    border: 1px solid #fadfdf;
    border-radius: 4px;
    color: #e1140a;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    height: 56px;
    letter-spacing: 0;
    margin-left: 5px;
    opacity: .7;
    text-align: center;
    white-space: nowrap;
    width: 122px;
  }
  .pcRegister_checkBoxContainer__iqiNc {
    margin-top: 30px;
  }
  .le-checkbox-container .le-checkbox-content {
    display: flex;
  }
  .le-checkbox-container .le-checkbox-content .le-checkbox-icon {
    cursor: pointer;
    height: 16px;
    margin-right: 4px;
    width: 16px;
  }
  .PrivacyInfo_infoStyle__YpTrQ {
    color: #252525;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 14px;
    opacity: .9;
  }
  .PrivacyInfo_infoFontStyle__7a34d {
    color: #252525;
    cursor: pointer;
    font-weight: 700;
    padding: 0 5px;
  }
  .PrivacyInfo_inlineBlock__YbZsr {
    display: inline-block;
  }
  .form-item-container {
    height: 56px;
    width: 100%;
  }
  .le-button {
    align-items: center;
    background-color: #eee;
    color: #454545;
    cursor: pointer;
    display: inline-flex;
    font-size: 12px;
    height: 30px;
    justify-content: center;
    padding: 0 22px;
  }
  .pcRegister_registerContainer__oIcJl .pcRegister_registerBtn__2PVC\+ {
    background-image: linear-gradient(90deg,#f22d18,#e53939);
    border-radius: 4px;
    box-shadow: 0 4px 10px 0 hsla(3,45%,67%,.49);
    font-size: 16px;
    font-weight: 400;
    height: 56px;
    letter-spacing: 10px;
    margin-top: 10px;
    text-align: center;
    width: 326px;
  }
  .le-button-primary {
    background-color: #e1140a;
    color: #fff;
  }
  .pcRegister_commonRegister__QWDLd {
    align-items: center;
    color: #252525;
    cursor: pointer;
    font-family: FZLTHJW--GB1-0;
    font-size: 13px;
    font-weight: 400;
    justify-content: flex-end;
    letter-spacing: 0;
    margin-top: 20px;
  }
  .pcRegister_flexStyle__IKXy\+ {
    display: flex;
  }
  .pcRegister_commonRegister__QWDLd .pcRegister_line__hz5JJ {
    margin: 0 10px;
  }
  .pcRegister_commonRegister__QWDLd .pcRegister_arrowRight__QX-97 {
    background-color: initial;
    border-color: #979797;
    border-style: solid;
    border-width: 1px 1px 0 0;
    height: 5px;
    margin-left: 3px;
    transform: rotate(45deg);
    width: 5px;
  }
  .pcRegister_registerContainer__oIcJl .pcRegister_registerBtn__2PVC\+:hover {
    opacity: .9;
  }

  .ScanCodeLogin_scanCode_container__6-Jdu {
    overflow: hidden;
  }
  .ScanCodeLogin_headRight_container__ACX1z {
    background-image: url(../../../public/img/qrcode_login_return.png);
    background-size: 100%;
    cursor: pointer;
    float: right;
    height: 67px;
    margin-right: 2px;
    margin-top: 2px;
    opacity: .7;
    width: 71px;
  }
  .ScanCodeLogin_scanCode_container__6-Jdu .ScanCodeLogin_title__HGvV7 {
    color: #252525;
    font-size: 27px;
    font-weight: 500;
    letter-spacing: 0;
    margin-top: 81px;
    text-align: center;
  }
  .ScanCodeLogin_scanCode_container__6-Jdu .ScanCodeLogin_codeImg__thGiD {
    margin-top: 52px;
    position: relative;
    text-align: center;
  }
  .ScanCodeLogin_scanCode_container__6-Jdu .ScanCodeLogin_codeImg__thGiD img {
    height: 198px;
    padding: 6px 7px;
    width: 196px;
  }
  .ScanCodeLogin_qrcodeError__-hA-L {
    align-items: center;
    background: hsla(0,0%,100%,.87);
    border: 1px solid #e0e0e0;
    display: inline-flex;
    flex-direction: column;
    font-size: 14px;
    font-weight: 500;
    height: 196px;
    justify-content: center;
    left: 125px;
    padding: 6px 7px;
    position: absolute;
    top: 0;
    width: 194px;
  }
  .ScanCodeLogin_qrcodeError__-hA-L .le-button {
    background-image: linear-gradient(90deg,#f22d18,#e53939);
    border-radius: 2px;
    font-size: 14px;
    font-weight: 400;
    height: 33px;
    margin-top: 22px;
    width: 66px;
  }
  .le-button-primary {
    background-color: #e1140a;
    color: #fff;
  }
  .ScanCodeLogin_scanCode_container__6-Jdu .ScanCodeLogin_codeInfo__Zrvcr {
    align-items: center;
    color: #252525;
    display: flex;
    font-size: 15px;
    font-weight: 400;
    justify-content: center;
    letter-spacing: 0;
    line-height: 17px;
    margin-top: 14px;
  }
  .ScanCodeLogin_scanCode_container__6-Jdu .ScanCodeLogin_codeInfo__Zrvcr img {
    height: 20px;
    vertical-align: middle;
    width: 20px;
  }
  .ScanCodeLogin_scanCode_container__6-Jdu .ScanCodeLogin_codeInfo__Zrvcr span {
    color: #e1140a;
  }
  .ScanCodeLogin_scanCode_container__6-Jdu .ScanCodeLogin_scanCode_load__p1XHW {
    align-items: center;
    background: #f6f6f6;
    box-sizing: border-box;
    color: #454545;
    font-size: 13px;
    font-weight: 400;
    height: 65px;
    justify-content: end;
    letter-spacing: 0;
    line-height: 19px;
    margin-top: 106px;
    padding-right: 23px;
    width: 100%;
  }
  .ScanCodeLogin_flexStyle__3eA2q {
    display: flex;
  }
  .ScanCodeLogin_scanCode_container__6-Jdu .ScanCodeLogin_scanCode_load__p1XHW img {
    cursor: pointer;
    height: 18px;
    margin-left: 6px;
    width: 18px;
  }
  .ScanCodeLogin_scanSuccess__1i7bJ {
    align-items: center;
    color: #454545;
    display: flex;
    flex-direction: column;
    font-size: 15px;
    height: 467px;
    text-align: center;
    width: 100%;
  }
  .PcLogin_displayNone__IiXzW {
    display: none!important;
  }
  .ScanCodeLogin_scanSuccess__1i7bJ img {
    height: 90px;
    padding-top: 80px;
    width: 90px;
  }
  .ScanCodeLogin_scanSuccess__1i7bJ .scanSuccess_icon {
    color: #252525;
    font-size: 22px;
    font-weight: 500;
    margin-bottom: 43px;
    margin-top: 23px;
  }
  .ScanCodeLogin_scanCode_container__6-Jdu .ScanCodeLogin_smallCode_container__8MTIs {
    background: #fff;
    bottom: 52px;
    box-shadow: 0 0 10px 0 hsla(0,0%,80%,.5);
    box-sizing: border-box;
    height: 120px;
    padding: 5px 3px;
    position: absolute;
    right: 0;
    width: 106px;
  }
  .PcLogin_displayNone__IiXzW {
    display: none!important;
  }
  .ScanCodeLogin_scanCode_container__6-Jdu .ScanCodeLogin_smallCode_container__8MTIs .ScanCodeLogin_triangle1__MZ-4m {
    border: 7px solid transparent;
    border-top-color: hsla(0,0%,80%,.5);
    height: 0;
    position: absolute;
    right: 24%;
    top: 100%;
    width: 0;
  }
  .ScanCodeLogin_scanCode_container__6-Jdu .ScanCodeLogin_smallCode_container__8MTIs .ScanCodeLogin_triangle2__VWmPu {
    border: 7px solid transparent;
    border-top-color: #fff;
    height: 0;
    position: absolute;
    right: 24%;
    top: 100%;
    width: 0;
  }
  .ScanCodeLogin_scanCode_container__6-Jdu .ScanCodeLogin_smallCode_container__8MTIs img {
    height: 100px;
    width: 100px;
  }
  .loginBtn_number {
    margin: 12px auto 10px;
  }
  .tab-pane .tab-pane-item-active .lineAnimationLeft {
    animation: moveLeft .2s linear;
    visibility: visible;
  }
  .commonRegist .verticalSplitLine {
    margin: 0 10px;
  }
  .commonRegist p, .commonRegist span {
    cursor: pointer;
  }
  .PcOtherLoginContainer_otherLogin_img__cKwXg:hover {
    opacity: 1;
  }
  .commonBtn:hover {
    opacity: .9;
  }
  .form-item-error {
    align-items: center;
    color: #e1140a;
    display: flex;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0;
    margin-bottom: -22px;
    margin-top: 4px;
  }
  .form-item-error .form-item-error-icon {
    height: 11px;
    margin-left: 4px;
    margin-right: 3px;
    width: 11px;
  }
  .sms-code-disabled{
    color: #606060!important;
  }
</style>
